<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    show-footer
    transfer
    width="900"
    destroy-on-close
    :loading="listLoading"
    @close="close"
  >
    <template #default>
      <vxe-grid
        ref="roleGrid"
        border
        stripe
        resizable
        auto-resize
        keep-source
        highlight-current-row
        align="center"
        :columns="roleTableColumn"
        :data="roleData"
        :row-config="{
          keyField: 'id',
          useKey: 'id',
        }"
        :checkbox-config="{
          highlight: true,
          reserve: true,
        }"
        :edit-config="{
          trigger: 'click',
          mode: 'cell',
          showStatus: true,
          icon: 'fa fa-pencil',
        }"
        :column-config="{ useKey: 'id' }"
        height="450"
      >
        <template #form>
          <vxe-form
            ref="formRef"
            :data="roleQueryForm"
            title-align="right"
            title-width="230"
          >
            <vxe-form-item title="角色名称" field="name" span="12">
              <template #default>
                <el-input v-model="roleQueryForm.name" style="width: 160px" />
              </template>
            </vxe-form-item>
            <vxe-form-item span="12">
              <template #default>
                <el-button plain @click="queryData">
                  <i class="icon-wpkj-search"></i>
                  搜索
                </el-button>
              </template>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-grid>
    </template>
    <template #footer>
      <el-button type="primary" @click="addUserRole">
        <i class="icon-wpkj-save"></i>
        {{ translate('确定') }}
      </el-button>
      <el-button type="danger" plain @click="close()">
        {{ translate('取消') }}
      </el-button>
    </template>
  </vxe-modal>
</template>

<script>
  import { getUserRoles } from '@/api/system/permission/index'
  import { translate } from '@/i18n'

  export default defineComponent({
    name: 'RoleList',
    emits: ['fetch-role-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const $XEUtils = inject('$XEUtils')
      const $baseLodash = inject('$baseLodash')

      const state = reactive({
        formRef: null,
        roleGrid: null,
        dialogFormVisible: false,
        title: '',
        roleQueryForm: { pageNo: 1, pageSize: 30, name: undefined },
        roleTableColumn: [
          { type: 'seq', width: 50 },
          { type: 'checkbox', width: 50 },
          {
            field: 'name',
            title: '角色',
            showOverflow: true,
            width: 320,
            type: 'html',
          },
          {
            field: 'remark',
            title: '备注',
            showOverflow: true,
            width: 300,
          },
        ],
        total: 0,
        listLoading: false,
      })

      const showOpen = () => {
        state.listLoading = true
        state.title = translate('权限列表')
        getUserRoles(state.roleQueryForm)
          .then((response) => {
            if (response.code === 0 || response.code === 200) {
              const { data } = response
              state['roleGrid'].reloadData(data)
              console.log(data)
            }
            state.listLoading = false
          })
          .catch((err) => {
            state.listLoading = false
          })
        state.dialogFormVisible = true
      }

      const addUserRole = () => {
        const row = state['roleGrid'].getCheckboxRecords()
        if (row.length > 0) {
          emit('fetch-role-data', row)
          state.dialogFormVisible = false
          state['formRef'].reset()
        } else {
          $baseMessage(`请选择角色`, 'error', 'vab-hey-message-success')
        }
      }

      const queryData = async (val) => {
        state.listLoading = true
        getUserRoles(state.roleQueryForm)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              state['roleGrid'].reloadData(res.data)
            }
            state.listLoading = false
          })
          .catch((err) => {
            state.listLoading = false
          })
      }

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        queryData()
      }

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        queryData()
      }

      const close = () => {
        state.roleQueryForm = {
          pageNo: 1,
          pageSize: 30,
          name: undefined, // 角色名称
        }
        state.dialogFormVisible = false
        state['formRef'].reset()
      }

      return {
        ...toRefs(state),
        translate,
        showOpen,
        close,
        queryData,
        addUserRole,
        handleSizeChange,
        handleCurrentChange,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .el-tabs__new-tab {
    border: 0px !important;

    div {
      margin-right: 40px;
    }
  }
</style>
